<template>
  <div class="phb">
    <ul>
      <li style="background-color: #eee;" class="header">
        <p class="pm">排名</p>
        <p class="username">用户名称</p>
        <p class="score">得分</p>
      </li>
      <li class="nr" v-for="(item, index) in list" :key="item">
        <p class="pm">
            <img v-if="index === 0" src="~@/assets/1.png" alt="">
            <img v-else-if="index === 1" src="~@/assets/2.png" alt="">
            <img v-else-if="index === 2" src="~@/assets/3.png" alt="">
            <span v-else>{{ index+1 }}</span>
        </p>
        <p class="username">{{ item.uacc || '游客'+index }}</p>
        <p class="score">{{ item.score || 0 }}</p>
      </li>
    </ul>
  </div>
</template>
      
<script lang="ts" setup>
import { ref, inject, onMounted } from "vue";
import {getRank} from '@/api/index';
import { useRouter } from 'vue-router'

const router = useRouter()

const { setTitle, setShowLeft } = inject("nav");

const list = ref([]);

onMounted(() => {
    if (!localStorage.getItem('user')) {
        router.push({ path: '/login' });
    }
    let user = JSON.parse(localStorage.getItem('user'));
    setShowLeft(true);
    setTitle("排行榜");
    getRank({uid: user.id}).then(res => {
        list.value = res.data.data || []
    }).catch(() => {
      console.log('phb error')
    })
})

</script>
      
  <style lang="less" scoped>
.phb {
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 2vw;
  overflow: hidden;

  ul {
    li {
        display: flex;
        height: 50px;
        align-items: center;

        .pm {
            width: 10%;
            display: flex;
            justify-content: flex-start;
            padding-left: 5px;

            img {
                width: 24px;
                height: 24px;
            }
        }
        .score {
            width: 20%;
            display: flex;
            justify-content: flex-end;
            padding-right: 5px;
        }
        .username {
            width: 70%;
            display: flex;
            justify-content: center;
        }
    }

    .nr:nth-of-type(2n+1) {
        background-color: #f0f0f0;
    }
  }
}
</style>